<template>
 <div class="Login">
<div class="Hader_Logo">
  <div class="Hader_Img">
    <van-image
    class="Img"
  width="100"
  height="100"
  lazy-load
  :src="Logoimg"
/>
  </div>
  <div class="Hader_Title">约稿</div>
</div>
  <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    clearable
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  
  <van-field
    v-model="password"
    clearable
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />


  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      登录
    </van-button>
  </div>
</van-form>
  
  <!-- Footer 页脚-->
  <div class="Footer">
    <div class="RegisteredUser">立即注册</div>
    <div class="ForgetPassword">忘记密码</div>
  </div>
 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

 key:1,
  username: '',
  password: '',
  Logoimg:require('../assets/icon/128-online-payment.png'),
  fromData:''
  
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 debugger;

  },
 created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。
    this.$store.state.Title = "登录";
    this.$store.state.return = "";
    this.$store.state.LeftArrow = false;
    this.$store.state.MenuShow = false
   this.click(this.key)

  },
  beforeMount:function (){

  },
  beforeDestroy:function (){
     this.$store.state.MenuShow = true
  },
  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。

click(Vlue,key){

 debugger;

 console.log(Vlue,key)

 },
  onSubmit(values) {
      console.log(values);
      const THIS = this;
      THIS.axios
        .get(THIS.pathuiL +"users?phone="+THIS.username+"&code="+THIS.password)
        .then(function(response) {
        if(response.data.length>0){
           localStorage.setItem("user", JSON.stringify(response.data[0]));
          
           THIS.$router.push('/')
        }else{
          THIS.Toast('密码或者账号错误')
        }
        })
        .catch(function(err) {
          console.log(err);
        });
    }
 

  }

}

</script>

<style lang="scss"  scope>
  .Login {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .Hader_Logo {
    width: 100%;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .Hader_Img {
   width: 100%;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
  }
.Hader_Img>Img {
  width: 2rem;
  height: 2rem;
}
.Hader_Title {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 1rem;
  font-family: cursive;
}
.Footer {
  width: 100%;
  height: 1rem;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.RegisteredUser {
  font-size: 0.5rem;
  font-family: cursive;
  color: #f40; 
  box-shadow: 0px 0px 20px red;
    margin: 0 0.2rem;
    box-shadow: 1px 3px 3px #cccccc;
}
.ForgetPassword {
  font-size: 0.5rem;
  font-family: cursive;
  color: #f40;
  box-shadow: 1px 3px 3px #cccccc;

 
}
</style>